<template>
    <view class="page" :style="{background: empty ? '#fff' : '#FF6146'}">
        <status-bar title='我的奖品' :goHome='fromShare'></status-bar>
        <view class="padding40-30" v-if="!empty">
            <view class="item bgwhite bor_radius_6 d-flex j-sb a-center m-bot20" v-for="(item,index) in prizeList" :key="index">
                <view class="d-flex flex-1">
                    <image :src="$imgUrls(item.img)" mode="aspectFill" class="img f-shrink-0"></image>
                    <view class="d-flex f-column j-sb p-left20 p-right20 p-top24 p-bot24">
                        <view class="size32 color_22 bold500 ellipsis">{{ item.title }}</view>
                        <view class="size28 color_99 bold400 ellipsis">{{ item.info }}</view>
                    </view>
                </view>
                <view class="btn bor_radius_6 size26 text-center" @click="handleView(index)">立即查看</view>
            </view>
        </view>

        <empty v-else cat='3' msg='暂时还没有奖品哦~~'></empty>

        <!-- 奖品详情 -->
        <u-overlay :show="show" @click="show = false">
            <view class="flexac height">
			    <view class="details bor_radius_30s bgwhite p-re p-left40 p-right40 p-top70 p-bot70" @tap.stop
                    :class="{'p-bot140': (popupData.type == 2 && popupData.flag == 3) || (popupData.type != 1 && popupData.type != 2)}">
                    <view class="title size42 white bold text-center p-ab">奖品详情</view>
                    <view class="close p-ab" @click="show = false">
                        <u-icon name="close-circle" size="30" color="#fff"></u-icon>
                    </view>
                    <view class="cont">
                        <!-- 共同显示 -->
                        <view class="d-flex a-center">
                            <image :src="$imgUrls(popupData.img)" mode="aspectFill" class="img f-shrink-0"></image>
                            <view class="p-left20 p-right20">
                                <view class="size32 color_22 bold500 ellipsis m-bot10">{{ popupData.title }}</view>
                                <view class="size28 color_99 bold400 ellipsis_2">{{ popupData.info }}</view>
                            </view>
                        </view>
                        <view>
                            <view class="size28 color_22 bold500 m-top30 m-bot20">奖品说明:</view>
                            <u-read-more ref="uReadMore" textIndent="0em" showHeight="100" :toggle="true" closeText="展开" color="#F95433" v-if="show">
                                <mp-html :content="popupData.details" lazy-load scroll-table selectable use-anchor @load="load" />
                            </u-read-more> 
                            <!-- <mp-html :content="popupData.details" lazy-load scroll-table selectable use-anchor /> -->
                            <!-- <u-parse :content="popupData.details" :scrollTable="true" :selectable="true" :useAnchor="true"></u-parse> -->
                        </view>
                        <!-- 线下自提 -->
                        <view class="text-center p-top60" v-if="popupData.type == 1 && popupData.flag != 6">
                            <!-- 用来核销 -->
                            <image :src="$imgUrls(popupData.QRCode)" mode="scaleToFill" class="code" show-menu-by-longpress></image>
                        </view>
                        <!-- 快递邮寄 -->
                        <view v-if="popupData.type == 2">
                            <view class="size28 color_22 bold500 m-top40 m-bot20">{{ popupData.receiveText }}</view>
                            <view @click="toAddressList">
                                <!-- 未选择 -->
                                <view class="unreceipt_addr choose_wxaddr" v-if='!popupData.uaddr'>
                                    <text class="unreceipt_addr_text">添加收货地址</text>
                                </view>
                                <!-- 已选择 -->
                                <view class="d-flex j-sb a-center" v-else>
                                    <view>
                                        <view>
                                            <text class="h6 color_77 bold400 m-right20">{{ popupData.uname }}</text>
                                            <text class="h6 color_77 bold400">{{ popupData.utel }}</text>
                                        </view>
                                        <view class="size28 color_77 bold500">{{ popupData.uaddr }}</view>
                                    </view>
                                    <text class="iconfont icon-xiangyouxiayiye" v-if="popupData.flag == 3"></text>
                                </view>
                            </view>
                            <!-- 物流信息 -->
                            <view v-if="popupData.flag == 5 && popupData.courierInfo">
                                <view class="m-top40" v-if="popupData.courierInfo.courierFirm">
                                    <text class="size28 color_22 bold500 m-right20">快递公司</text>
                                    <text class="size28 color_77 bold500">{{ popupData.courierInfo.courierFirm }}</text>
                                </view>
                                <view class="m-top20" v-if="popupData.courierInfo.oddNumbers">
                                    <text class="size28 color_22 bold500 m-right20">快递单号</text>
                                    <text class="size28 color_77 bold500">{{ popupData.courierInfo.oddNumbers }}</text>
                                    <text class="size28 color_22 bold500 m-left10 p-left10" @click="$pop.setClip(popupData.courierInfo.oddNumbers)"
                                        style="border-left: 1rpx solid #777;">复制</text>
                                </view>
                            </view>
                        </view>
                        <view class="btn size30 bold500 text-center p-ab" v-if="popupData.type == 2 && popupData.flag == 3" @click="handleSubmit">确认收货地址</view>
                        <!-- 积分 -->
                        <view class="btn size30 bold500 text-center p-ab" v-if="popupData.type == 3" @click="toUrl('/userPage/sign/integralRecord')">查看积分</view>
                        <!-- 优惠券 -->
                        <view class="btn size30 bold500 text-center p-ab" v-if="popupData.type == 4" @click="toUrl('/userPage/user/discount_coupon')">查看优惠券</view>
                        <!-- 余额 -->
                        <view class="btn size30 bold500 text-center p-ab" v-if="popupData.type == 5" @click="toUrl('/moneyPage/capital/myMoney')">查看余额</view>
                    </view>
                </view>
		    </view>
        </u-overlay>

        <showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
    </view>
</template>

<script>
import {mapState} from 'vuex'
var that
export default {
    data(){
        return {
            fromShare: 0,
            prizeList: [],
            empty: true,
            show: false, // 奖品详情
            popupData: {},
            cid: "",
            showModal: false
        }
    },
    computed:{
		...mapState(['bid','vid'])
	},
    onLoad(e){
        that = this
        if(e.fromShare){ that.fromShare = e.fromShare }
        if(e.cid){ that.cid = e.cid}
        that.getPrizeList()
    },
    onShow(){
        if(that.popupData.type!=2) return
        that.getOldAddress()
    },
    methods: {
        getPrizeList(){
            that.$http.post({
                url: '/SRA_LuckDraw/myPrizeList',
                data: {
                    VeriCode: that.bid,
                    cid: that.cid,
                    v_id: that.vid
                }
            }).then(res=>{
                if(res.code != 100) return that.$Toast(res.notice)
                that.prizeList = res.data
                that.empty = that.prizeList?.length ? false : true
            })
        },
        handleView(index){
            that.show = true
            that.popupData = that.prizeList[index]
            if(that.popupData.uaddr || that.popupData.type!=2) return
            that.getOldAddress()
        },
        getOldAddress(){
            that.$http.get({
                url: '/SRA_simMallApi/getOldAddress',
                data: {
                    type: 3
                }
            }).then(res=>{
                if(res.code == 100 && res.data){
                    that.popupData.uname = res.data.Aname
                    that.popupData.utel = res.data.Amobile
                    that.popupData.uaddr = res.data.Aregion + res.data.Aaddress
                }
            })
        },
        handleSubmit(){
            if (!that.vid) return that.showModal = true
            let { logId,prizeId,uname,utel,uaddr } = that.popupData
            if(!uaddr) return that.$Toast('请选择收货地址')
            that.$http.post({
                url: '/SRA_LuckDraw/saveMyInfo',
                data: {
                    VeriCode: that.bid,
                    cid: that.cid,
                    v_id: that.vid,
                    logId,
                    prizeId,
                    uName: uname,
                    uTel: utel,
                    uAddr: uaddr,
                    remarks: ''
                }
            }).then(res=>{
                if(res.code != 100) return that.$Toast(res.notice)
                that.show = false
                that.$Toast('提交成功')
                that.getPrizeList()
            })
        },
        toAddressList(){
            if(that.popupData.flag == 3){
                that.toUrl(`/orderPage/Addresslist/Addresslist`)
            }   
        },
        load(){
            that.$refs.uReadMore.init()
        }
    }
}
</script>

<style lang="scss" scoped>
.item {
    width: 100%;
    height: 180rpx;
    padding: 20rpx 40rpx 20rpx 20rpx;
    .btn {
        width: 120rpx;
        line-height: 44rpx;       
        border: 2rpx solid #FF4525;
        color: #FF4525;;
    }
}
.details {
    width: 680rpx;
    box-shadow: 0rpx 16rpx 2rpx 0rpx #F55F3E;
    border: 15rpx solid #FEE1B2;
    .cont {
        min-height: 460rpx;
        max-height: calc(80vh - 216rpx);
        overflow-x: hidden;
        overflow-y: auto;
    }
    .title {
        width: 396rpx;
        line-height: 66rpx;       
        background: #F95433; 
        border-radius: 43rpx;    
        border: 10rpx solid #FFECA0;       
        box-shadow: 1rpx 4rpx 18rpx 0rpx rgba(201,17,0,0.4);
        left: 50%;
        margin-left: -198rpx;
        top: -43rpx;
    }
    .close {
        left: 50%;
        margin-left: -30rpx;
        bottom: -120rpx;
    }
    .btn {
        width: 272rpx;
        line-height: 66rpx;    
        background: linear-gradient(0deg, #FFEAA0, #FDC71F);
        box-shadow: 0rpx 10rpx 0rpx 0rpx #FD6703;
        border-radius: 33rpx;    
        color: #DA6627;
        left: 50%;
        margin-left: -136rpx;
        bottom: 40rpx;
    }
    .code {
        width: 160rpx;
        height: 160rpx;
    }
}
.img {
    width: 140rpx;
    height: 140rpx;
}
</style>